<!-- 详情 -->
<template>
  <div class="drawer-layoutx">
    <el-drawer :title="productConfigTitle" :visible.sync="drawer" @close="closedinvitation" size="75%"
      :wrapperClosable="false">
      <div class="layout">
        <div class="configform-box">
          <el-form
            label-position="left"
            :inline="true"
            size="small"
            ref="eventsForm"
            :model="eventsForm"
          >
            <el-form-item
              label="关键字"
              class="form-box-item"
              label-width="50px"
              prop="keywords"
            >
              <el-input
                placeholder="请输入关键字"
                v-model="eventsForm.keywords"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="分类"
              class="form-box-item"
              label-width="50px"
              prop="cate_id"
            >
              <el-cascader
                v-model="eventsForm.cate_id"
                :options="categoryList"
                :props="{
                  checkStrictly: true,
                  value: 'id',
                  label: 'name',
                  children: 'children',
                }"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="height: 30px" @click="getListWay"
                >查询</el-button
              >
              <el-button style="height: 30px" @click="resetForm('eventsForm')"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="configform-box">
          <el-button
          icon="el-icon-circle-plus-outline"
            type="primary"
            style="height: 30px; margin-bottom: 20px"
            @click="addproduct"
            >添加商品</el-button
          >
          <el-button type="danger" icon="el-icon-delete" style="height: 30px" @click="Batchdeletion"
            >批量移除</el-button
          >
          <div>
            <el-table
              v-loading="loading"
              highlight-current-row
              :data="goodList"
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              >
              <el-table-column type="selection" width="60"></el-table-column>
              <el-table-column prop="name" label="商品名称" align="center">
                <template slot-scope="scope">
                  <el-tooltip placement="top-start" :content="scope.row.name + ''">
                    <div class="one_line_hidden">
                      {{ scope.row.name ? scope.row.name : "-" }}
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="category1" label="商品分类" align="center">
                <template slot-scope="scope">
                  {{scope.row.category1 ? scope.row.category1.name : '-'}}
                  </template>
              </el-table-column>
              <el-table-column prop="main_image" label="商品图片" align="center">
                <template slot-scope="scope">
                  <div style="width: 36px; height: 36px; margin: 0 auto">
                    <el-image v-if="scope.row.main_image" :src="scope.row.main_image"
                      :preview-src-list="[scope.row.main_image]" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="supplier" label="所属店铺" align="center">
                <template slot-scope="scope">
                  <el-tooltip placement="top-start" :content="scope.row.supplier.supplier_name + ''">
                    <div class="one_line_hidden">
                      {{ scope.row.supplier ? scope.row.supplier.supplier_name : "-" }}
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="max_price" label="商品价格" align="center">
              </el-table-column>
              <el-table-column
                fixed="right"
                width="120"
                prop="address"
                label="操作"
                align="center"
              >
                <template slot-scope="{ row, $index }">
                  <el-button
                    type="text"
                    @click.native="handleDelete($index, row)"
                    >移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="eventsForm.page"
              :limit.sync="eventsForm.count"
              @pagination="getListWay"
            />
          </div>
        </div>
      </div>
    </el-drawer>
    <addproduct
      ref="addproduct"
      v-if="ifShowadd"
      :goodsIds="goodsIds"
      :goodsType="goodsType"
      :addproductTitle="addproductTitle"
      :productConfigTitle="productConfigTitle"
    />
  </div>
</template>
<script>
import { getCategoryList, getGoodsList } from "@/api/commodity/index";
import { listGoodsIds } from "@/api/index";
import addproduct from "./addshopdistribu";
export default {
  name: "detail",
  props: [
    "productConfigTitle",
    "goodsType",
    "goodsIdArr",
    "goodsIdsRowList",
  ],
  components: {
    addproduct,
  },

  data() {
    return {
      drawer: true,
      goodsIds: [],
      goodsIdsRow: [],
      // 商品类目列表
      categoryList: [],
      eventsForm: {
        state: "all",
        keywords: "",
        cate_id: [],
        goods_ids: "",
        goods_pay_type: '',
        page: 1,
        count: 10,
        type: 1,
        status: 1,
      },
      goodList: [],
      total: 0,
      loading: false,
      multipleSelection: [],
      addproductTitle: "",
      ifShowadd: false,
      isshow: [],
    };
  },
  created() {},
  mounted() {
    this.goodsIds = this.goodsIdArr;
    this.goodsIdsRow = this.goodsIdsRowList;
    this.getConfigurationWay();
  },
  methods: {
    getConfigurationWay() {
      this.loading = true;
      getCategoryList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.categoryList = res.data;
        this.getListWay();
      });
    },
    getListWay() {
      this.loading = true;
      this.getGoodsList();
    },

    getGoodsList() {
      this.eventsForm.goods_ids = this.goodsIds.toString();
      listGoodsIds(this.eventsForm).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.goodList = res.data.list;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    // 关闭抽屉
    closedinvitation() {
        this.$parent.closeConfig();
        this.$parent.addwardIdsRowWay(this.goodsIdsRow);
        this.$parent.addwardIdsWay(this.goodsIds);
    },

    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getListWay();
    },
    closeaddproduct() {
      this.ifShowadd = false;
    },
    //点击删除
    handleDelete(index, row) {
      this.$confirm("确定要将该商品在本活动中移除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var arr1 = [];
          this.goodsIdsRow.forEach((item) => {
            if (item.id !== row.id) {
              arr1.push(item);
            }
          });

          var arr = [];
          this.goodsIds.forEach((item) => {
            if (item !== row.id) {
              arr.push(item);
            }
          });
          this.$nextTick((res) => {
            this.goodsIdsRow = arr1;
            this.goodsIds = arr;
            this.$message({
              type: "success",
              message: "移除成功!",
            });
            this.getListWay();
          });
        })
        .catch(() => {});
    },
    addproductWay(row) {
      row.forEach((item) => {
        this.goodsIds.push(item.id);
      });
      this.$message({
        message: "添加成功",
        type: "success",
      });
      this.getListWay();
      this.$refs.addproduct.getListWay(this.goodsIds);
    },
    addproductRowWay(row) {
      this.goodsIdsRow.push(...row);
    },
    addproduct() {
      this.ifShowadd = true;
      this.addproductTitle = "添加商品";
      this.$nextTick(() => {
        this.$refs.addproduct.getListWay(this.goodsIds);
      });
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //批量删除
    Batchdeletion() {
      if (this.multipleSelection.length == 0) {
        return this.$messages.warning('请至少选择一个商品')
      } else {
        this.$confirm("确定要将已选择商品在本活动中移除除吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$nextTick(() => {
              this.goodsIdsRow = this.goodsIdsRow.filter(
                (x) => !this.multipleSelection.some((y) => y.id === x.id)
              );
              this.goodsIds = this.goodsIds.filter(
                (x) => !this.multipleSelection.some((y) => y.id === x)
              );
              this.$message({
                type: "success",
                message: "移除成功!",
              });
              this.getListWay();
            });
          })
          .catch(() => {});
      }
    },
    getArrDifference(arr1, arr2) {
      return arr1.concat(arr2).filter(function (v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v);
      });
    },
  },
};
</script>
<style lang="scss">
.drawer-layoutx {

    /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
    .el-drawer__body {
      overflow: auto;
    }

    .el-drawer__header {
      background-color: #0256ff;
      color: #ffffff;
      padding: 10px 20px;
      margin-bottom: 10px;
    }

    .el-tabs__header {
      padding-left: 50px;
      margin: 0;
    }

    .el-tabs__item {
      padding: 0 40px;
    }

    .el-tabs__nav-wrap::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #ffffff;
      z-index: 1;
    }

    .el-alert--warning.is-light .el-alert__description {
      color: #c77b04;
      font-size: 14px;
    }

    .configform-box {
      .form-box-item {
        .el-form-item__label {
          font-size: 12px;
          font-weight: 500;
          width: 80px;
        }

        .el-input {
          width: 200px;
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
.blockquote-box {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 16px 0;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  font-size: 16px;
}

.configform-box {
  margin: 0 20px;

  .form-box-item {
    padding-bottom: 10px;
    padding-right: 20px;
    font-size: 12px;
    color: #4c4c4c;

    .form-tip {
      font-size: 12px;
      color: #4c4c4c;

      .tip-key {
        font-weight: bold;
        text-decoration: underline;
      }
    }
  }

  .table-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .table-top-left {
      display: flex;

      div {
        margin-right: 20px;
      }
    }

    .table-top-right {
      display: flex;

      div {
        margin-left: 20px;
      }
    }
  }

  .table-num {
    margin-left: 5px;
    background: #f0f0f0;
    width: 35px;
    border-radius: 5px;
  }
}

.button-box {
  margin-left: 30px;
  margin-bottom: 20px;

  .next-button {
    background-color: #eeeeee;
    color: #4c4c4c;
    height: 30px;
  }
}

.edit-cell {
  width: 80px;
  border: none;
  background: none;
}
</style>
